<template>
  <div class="container messageContain">
    <el-card class="box-card">
      <el-tabs
        type="card"
        v-model="queryParams.msgTypes"
        @tab-click="getList()"
      >
        <el-tab-pane label="全部" name="15,16,17,18,21,22,23,24"> </el-tab-pane>
        <el-tab-pane label="审核消息" name="15,16,17,18"> </el-tab-pane>
        <el-tab-pane label="预警消息" name="23"> </el-tab-pane>
        <el-tab-pane label="通知" name="21,22"> </el-tab-pane>
        <el-tab-pane label="知识审核" name="24"> </el-tab-pane>
      </el-tabs>
      <div class="content" v-loading="loading">
        <div
          class="list"
          v-if="list.length > 0"
          infinite-scroll-immediate="false"
          infinite-scroll-distance="1"
        >
          <div
            class="temp shou flex"
            style="width: 100%"
            @click="reals(item)"
            v-for="(item, index) in list"
            :key="index"
          >
            <div class="icon rela">
              <div
                v-if="item.readStatus == 0 || item.readStatus == false"
                class="redtip abso"
              ></div>
              <div>
                <img src="@/assets/images/classify/msgtype0.png" alt="" />
              </div>
            </div>
            <div class="msginfo" style="flex: 1; padding-left: 16px">
              <div class="flexbet">
                <div
                  class="msgname"
                  :style="{
                    color: item.importantFlag == 1 ? '#ff4d03' : '#333333',
                  }"
                >
                  <b>{{ item.title }}</b>
                </div>
                <div class="date">{{ parseTime(item.createTime) }}</div>
              </div>

              <div class="msgDetail">
                {{ item.content }}
              </div>
            </div>
          </div>
        </div>
        <div v-else>
          <el-empty style="margin-top: 90px" description="暂无消息~"></el-empty>
        </div>
      </div>
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </el-card>
    <rejectDia
      :type="3"
      :open.sync="rejectOpen"
      :propform="rejectform"
    ></rejectDia>
  </div>
</template>

<script>
import {
  listPost_message,
  readpost,
  schooldelApproval,
} from "@/api/messageCenter/message";
import rejectDia from "@/views/course/components/rejectDia.vue";
import { getPost_school } from "@/api/school/list";
export default {
  name: "Post",
  components: { rejectDia },
  data() {
    return {
      rejectOpen: false,
      rejectform: {},
      loading: false,
      activeName: "1",
      list: [],
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        msgTypes: "15,16,17,18,21,22,23,24",
        port: 0,
      },
      total: 0,
    };
  },
  created() {
    this.getList();
  },
  methods: {
    /* 驳回原因 */
    handleReason(id) {
      console.log("驳回原因", id);
      this.rejectform = {
        id: id,
      };
      this.rejectOpen = true;
    },
    async getList() {
      this.loading = true;
      try {
        let res = await listPost_message(this.queryParams);
        this.list = res.rows;
        this.total = res.total;
      } finally {
        this.loading = false;
      }
    },
    // 消息列表处理
    async reals(item) {
      console.log(item);
      //更新消息状态
      let res = await readpost(item.id);
      item.readStatus = 1;
      // pc审核消息：15、16、17 15、pc端抽查申请等待审核页面，16pc端抽查待批改页面
      // 16.抽查待批改
      if (item.msgType == 16) {
        this.$router.push({
          path: "/testCheck/approvalAnswer",
          query: {
            // keyId就是考试试卷id
            keyId: item.keyId,
            userId: item.senderId,
          },
        });
      }
      // 15.抽查补考审批
      if (item.msgType == 15) {
        this.$router.push({
          path: "/testCheck/detail",
          query: {
            // keyId就是考试试卷id
            id: item.keyId,
            activeIndex: 4,
          },
        });
      }
      // 17.课程审核
      if (item.msgType == 17) {
        this.$router.push({
          path: "/course/officialCourseDetail",
          query: {
            courseTemporaryId: item.keyId,
            type: "audit",
            status: "temporary3",
          },
        });
      }
      // 22.课程审核已通过
      if (item.msgType == 21) {
        this.$router.push({
          path: "/course/course_temporary",
        });
      }
      // 22.课程审核被驳回
      if (item.msgType == 22) {
        this.handleReason(item.keyId);
      }
      // 24.知识审核
      if (item.msgType == 24) {
        this.$router.push({
          path: "/knowledge/temporary",
        });
      }
      // 18.门店删除审批
      if (item.msgType == 18) {
        let res = await getPost_school(item.keyId);
        this.$confirm(
          `是否通过【${res.data.schoolName}】删除的申请？此操作不可恢复！`,
          `门店删除审核`,
          {
            confirmButtonText: "允许",
            cancelButtonText: "拒绝",
            type: "warning",
            distinguishCancelAndClose: true,
          }
        )
          .then(async () => {
            try {
              let res = await schooldelApproval(item.keyId, 1);
              if (res.code == 200) {
                this.$message({
                  type: "success",
                  message: "操作成功",
                });
              }
            } catch (e) {}
          })

          .catch(async (action) => {
            console.log(action);
            if (action === "cancel") {
              let res = await schooldelApproval(item.keyId, 0);
              if (res.code == 200) {
                this.$message({
                  type: "success",
                  message: "操作成功",
                });
              }
            }
          });
      }
    },
  },
};
</script>
<style scoped lang="scss">
//列表
.list::-webkit-scrollbar {
  border: none;
}

.list {
  overflow-y: scroll;
  height: 100%;

  .temp {
    padding: 16px 0 8px;
    border-bottom: 1px solid #edeff0;

    .icon {
      img {
        width: 40px;
        height: 40px;
      }

      .redtip {
        top: 0px;
        right: 0px;
        width: 8px;
        height: 8px;
        background: #ff3b30;
        border-radius: 4px;
      }
    }

    .msginfo {
      box-sizing: border-box;
      padding-right: 10px;
      .msgname {
        width: 50%;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        overflow-wrap: break-word;
        line-height: 20px;

        b {
          word-break: break-all; /* 允许在单词内换行 */
          font-size: 16px;
          font-family: PingFangSC-Semibold, PingFang SC;
          font-weight: 600;
          line-height: 16px;
        }
      }

      .msgDetail {
        margin-top: 8px;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #999999;
        line-height: 22px;
      }
    }

    .date {
      text-align: right;
      width: 50%;
      padding-top: 5px;
      font-size: 12px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #999999;
      line-height: 6px;
    }
  }
}
.questionBtns {
  position: absolute;
  right: 0;
  top: 20px;
}
.content {
  padding: 0px 0;
  box-sizing: border-box;
  background: white;
  width: 100%;
  border-radius: 20px;
  height: calc(((100vh - 68px) - 18px) - 30px - 110px);
}
</style>
